<template>
<div v-if="viewLoading" style="padding-bottom: 60px;">
  <van-cell-group>
    <div class="van-cell van-hairline van-field">打款信息</div>
    <div class="van-cell van-hairline van-field">
      <div class="van-cell__title"><span>收款账号</span></div>
      <div class="van-cell__value">{{ data.user_sell.account }}</div>
    </div>
    <div class="van-cell van-hairline van-field">
      <div class="van-cell__title"><span>收款手机号</span></div>
      <div class="van-cell__value">{{ data.user_sell.cellphone }}</div>
    </div>
    <div class="van-cell van-hairline van-field">
      <div class="van-cell__title"><span>收款推荐人手机号</span></div>
      <div class="van-cell__value">{{ data.parent_user_sell.cellphone }}</div>
    </div>
    <div class="van-cell van-hairline van-field">
      <div class="van-cell__title"><span>属性</span></div>
      <div class="van-cell__value" v-if="data.user_bank_info.type.toString() == '1'">云支付</div>
      <div class="van-cell__value" v-else-if="data.user_bank_info.type.toString() == '2'">支付宝</div>
      <div class="van-cell__value" v-else-if="data.user_bank_info.type.toString() == '3'">银行卡</div>
    </div>
    <div class="van-cell van-hairline van-field">
      <div class="van-cell__title"><span>真实姓名</span></div>
      <div class="van-cell__value">{{ data.user_bank_info.bank_name }}</div>
    </div>
    <div class="van-cell van-hairline van-field">
      <div class="van-cell__title"><span>打款账号</span></div>
      <div class="van-cell__value">{{ data.user_bank_info.bank_account }}</div>
    </div>
    <div class="van-cell van-hairline van-field">
      <div class="van-cell__title"><span>开户地址</span></div>
      <div class="van-cell__value">{{ data.user_bank_info.bank_address_detail }}</div>
    </div>
  </van-cell-group>

	<van-cell-group v-if="data.trade_buy.status=='1'">
		<div class="van-cell van-cell--required van-hairline van-field" :class="{'van-cell--center van-field--error': errors.has('safePassword')}">
			<div class="van-cell__title"><span>安全密码</span></div>
			<div class="van-cell__value">
				<input v-model="formFields.safePassword" v-validate="'required|min:6'" name="safePassword" type="password" placeholder="请输入安全密码" class="van-field__control">
				<div v-if="errors.has('safePassword')" class="van-field__error-message">{{ errors.first('safePassword') }}</div>
			</div>
		</div>

		<div class="van-cell van-cell--required van-hairline van-field">
			<div class="van-cell__title"><span>凭证图片</span></div>
			<div class="van-cell__value"><van-uploader accept="image/gif, image/jpeg, image/png" :max-size="1048576" @oversize="onUploaderOversize" :after-read="onUploaderAfterRead" class="van-field__control">点击上传</van-uploader></div>
		</div>

		<div v-if="showUpdateLoaderContent" class="van-cell van-hairline van-field">
			<img style="height: 100px;" :src="showUpdateLoaderContent">
		</div>

		<van-button size="small" style="width: 100%;" type="primary" @click="onSubmit">确认已打款</van-button>
	</van-cell-group>
</div>
</template>

<script>
import qs from 'qs';
import { NavBar, Field, CellGroup, Button, Uploader, Icon, Toast } from 'vant';
import ajaxVant from '../../../../../utils/ajaxVant';
import auth from '../../../../../utils/auth';

export default {
  components: {
    [NavBar.name]: NavBar,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Button.name]: Button,
    [Uploader.name]: Uploader,
    [Icon.name]: Icon
  },
  data() {
    return {
      showUpdateLoaderContent: '',
      data: {},
      formFields: {
        safePassword: '',
        imageContent: ''
      },
      viewLoading: false
    };
  },
  methods: {
    getData() {
      var _this = this;
      auth.getToken().then(function(token) {
        ajaxVant.get('/trade/business/buy/' + _this.$route.params.id + '?token=' + token).then(function(data) {
          if (data !== false) {
            _this.data = data;
            _this.viewLoading = true;
          }
        });
      });
    },
    onSubmit() {
      var _this = this;
      _this.$validator.validateAll().then((result) => {
        if (result) {
          auth.getToken().then(function(token) {
            ajaxVant.post('/trade/business/buy/' + _this.$route.params.id + '/status/3?token=' + token, qs.stringify(_this.formFields)).then(function(data) {
              if (data !== false) {
                Toast(data.msg);

                setTimeout(() => {
                  Toast.clear();
                  _this.$router.push({ name: 'tradeBusinessBuyLog' });
                }, 1000);
              }
            });
          });
        };
      });
    },
    onUploaderOversize(file) {
      Toast('图片过大,请压缩后上传!');
    },
    onUploaderAfterRead(file) {
      this.showUpdateLoaderContent = file.content;
      this.formFields.imageContent = file.content;
    }
  },
  mounted() {
    this.getData();
  }
};
</script>
